<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #demo {
            widtH: 300px;
            height: 300px;
            background: red;
            transition: .5s;
            position: relative;
        }

        #child {
            position: absolute;
            right: 10px;
            top: 10px;
            widtH: 20px;
            height: 20px;
            background: rgb(192, 140, 28);
        }
    </style>
</head>

<body>
    <div id="demo">
        <div id="child">
        </div>
    </div>
    <script>

        child.onclick = function (e) {
            //阻止事件冒泡
            e.stopPropagation();
            demo.remove()
        }

        demo.onclick = function () {
            location.href = 'https://jd.com'
        }




        //移动到内部元素时不会重复触发
        // demo.onmouseenter = function () {
        //     demo.style.background = 'green'
        // }

        // demo.onmouseleave = function () {
        //     demo.style.background = 'red'
        // }






        //移动到内部元素时会重复触发
        // demo.onmouseover = function () {
        //     demo.style.background = 'green'
        // }

        // demo.onmouseout = function () {
        //     demo.style.background = 'red'
        // }
    </script>
</body>

</html>